<template>
    <div class="mobile-wiki-detail">
        <!-- 返回按钮和标题 -->
        <div class="detail-header">
            <h2 class="detail-title">WIKI详细信息</h2>
        </div>

        <!-- 详情内容 -->
        <div class="detail-content">
            <!-- 基本信息卡片 -->
            <div class="info-card">
                <div class="info-item">
                    <span class="info-label">项目名称:</span>
                    <span class="info-value">{{ wikiData.projectName }}</span>
                </div>
                <div class="info-item">
                    <span class="info-label">wiki类型:</span>
                    <span class="info-value">{{ wikiData.itemWIKITypeName }}</span>
                </div>
                <div class="info-item">
                    <span class="info-label">处理人:</span>
                    <span class="info-value">{{ wikiData.createUser }}</span>
                </div>
            </div>

            <!-- 问题信息卡片 -->
            <div class="info-card">
                <div class="info-item">
                    <span class="info-label">问题描述:</span>
                    <span class="info-value">{{ wikiData.problemMsg }}</span>
                </div>
                <div class="info-item">
                    <span class="info-label">问题原因:</span>
                    <span class="info-value">{{ wikiData.problemReason }}</span>
                </div>
                <div class="info-item">
                    <span class="info-label">处理结果:</span>
                    <span class="info-value">{{ wikiData.trueResult }}</span>
                </div>
            </div>
            <!-- 处理留证卡片 -->
            <div class="info-card proof-card">
                <div class="info-item full-width">
                    <span class="info-label">处理留证:（支持手势放大）</span>
                </div>
                <div class="proof-content" v-dompurify-html="wikiData.problemPhoto"></div>
            </div>
            <!-- 时间信息卡片 -->
            <div class="info-card">
                <div class="info-item">
                    <span class="info-label">开始时间:</span>
                    <span class="info-value">{{ wikiData.beginDate }}</span>
                </div>
                <div class="info-item">
                    <span class="info-label">结束时间:</span>
                    <span class="info-value">{{ wikiData.endDate }}</span>
                </div>
                <div class="info-item">
                    <span class="info-label">处理时间:</span>
                    <span class="info-value">{{ wikiData.processingDate }}</span>
                </div>
            </div>
            <!-- 评分卡片 -->
            <div class="info-card rating-card">
                <div class="info-item full-width">
                    <span class="info-label">评分(1分-5分):</span>
                    <div class="rating-stars">
                        <span v-for="star in 5" :key="star" class="star"
                            :class="{ 'active': star <= currentRating, 'rated': hasRated }" @click="rate(star)">
                            <el-icon :size="24">
                                <StarFilled v-if="star <= currentRating" />
                                <Star v-else />
                            </el-icon>
                        </span>
                    </div>
                    <div class="rating-feedback" v-if="hasRated">
                        感谢您的评分！
                    </div>
                </div>
            </div>

        </div>

        <!-- 图片查看模态框 -->
        <div class="image-viewer" v-if="showImageModal" @click="closeImageModal">
            <div class="image-container" @click.stop>
                <img :src="currentImage" :style="{ transform: `scale(${imageScale}) rotate(${imageRotate}deg)` }"
                    @touchstart="handleTouchStart" @touchmove="handleTouchMove" @touchend="handleTouchEnd" />
                <div class="image-toolbar">
                    <button @click.stop="zoomIn" class="tool-button">
                        <el-icon>
                            <ZoomIn />
                        </el-icon>
                    </button>
                    <button @click.stop="zoomOut" class="tool-button">
                        <el-icon>
                            <ZoomOut />
                        </el-icon>
                    </button>
                    <button @click.stop="rotateImage" class="tool-button">
                        <el-icon>
                            <Refresh />
                        </el-icon>
                    </button>
                    <button @click.stop="resetImage" class="tool-button">
                        <el-icon>
                            <RefreshRight />
                        </el-icon>
                    </button>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import { ElMessage } from "element-plus";
import { getWikiMsg, getWikiTypeById, WikiRate } from '@/api/project/index';
import { tableTimeDateMsg, removeEmptyLines } from '@/utils/utils';
import { ZoomIn, ZoomOut, Refresh, RefreshRight, StarFilled, Star } from '@element-plus/icons-vue';

const route = useRoute();

const wikiData = ref({
    id: 0,
    createUser: "",
    projectName: "",
    processingDate: "",
    beginDate: "",
    endDate: "",
    auxiliaryUser: "",
    developmentBBTime: "",
    isTrue: 0,
    isArchiving: 0,
    archivingUrl: "",
    problemReason: "",
    trueResult: "",
    problemMsg: "",
    problemPhoto: "",
    itemWIKITypeName: ""
});

// 评分相关状态
const currentRating = ref(0);
const hasRated = ref(false);

const submitRating = async () => {
    const { data } = await WikiRate({
        "wikiId": wikiData.value.id,
        "wikiRate": currentRating.value,
    })
    if (data.code == 200) {
        ElMessage.success(data.msg);
        fetchWikiData();
    } else {
        ElMessage.error(data.msg);
        fetchWikiData();
    }
}

// 评分功能
const rate = (star: number) => {
    currentRating.value = star;
    // 这里可以添加API调用，将评分提交到服务器
    submitRating();
};

// 图片查看相关状态
const showImageModal = ref(false);
const currentImage = ref("");
const imageScale = ref(1);
const imageRotate = ref(0);
const touchStartX = ref(0);
const touchStartY = ref(0);
const touchStartScale = ref(1);
const touchStartRotate = ref(0);

// 关闭图片模态框
const closeImageModal = () => {
    showImageModal.value = false;
};

// 图片缩放和旋转控制
const zoomIn = () => {
    if (imageScale.value < 3) {
        imageScale.value += 0.2;
    }
};

const zoomOut = () => {
    if (imageScale.value > 0.5) {
        imageScale.value -= 0.2;
    }
};

const rotateImage = () => {
    imageRotate.value += 90;
};

const resetImage = () => {
    imageScale.value = 1;
    imageRotate.value = 0;
};

// 触摸事件处理 - 实现双指缩放和旋转
const handleTouchStart = (e: TouchEvent) => {
    if (e.touches.length === 2) {
        touchStartX.value = (e.touches[0].pageX + e.touches[1].pageX) / 2;
        touchStartY.value = (e.touches[0].pageY + e.touches[1].pageY) / 2;
        touchStartScale.value = imageScale.value;
        touchStartRotate.value = imageRotate.value;
    }
};

const handleTouchMove = (e: TouchEvent) => {
    if (e.touches.length === 2) {
        e.preventDefault();

        // 计算两点间距离变化
        const touch1 = e.touches[0];
        const touch2 = e.touches[1];
        const currentDistance = Math.hypot(
            touch1.pageX - touch2.pageX,
            touch1.pageY - touch2.pageY
        );
        const startDistance = Math.hypot(
            touch1.pageX - touch2.pageX,
            touch1.pageY - touch2.pageY
        );

        // 缩放比例
        const scaleChange = currentDistance / startDistance;
        imageScale.value = Math.max(0.5, Math.min(3, touchStartScale.value * scaleChange));

        // 计算旋转角度变化
        const startAngle = Math.atan2(
            touch1.pageY - touch2.pageY,
            touch1.pageX - touch2.pageX
        );
        const currentAngle = Math.atan2(
            touch1.pageY - touch2.pageY,
            touch1.pageX - touch2.pageX
        );
        imageRotate.value = touchStartRotate.value + (currentAngle - startAngle) * (180 / Math.PI);
    }
};

const handleTouchEnd = () => {
    // 触摸结束处理
};

// 获取wiki详情数据
const fetchWikiData = async () => {
    const wikiId = Number(route.params.id);

    try {
        // 获取wiki基本信息
        const resData = await getWikiMsg(wikiId);
        const data = resData.data.data;

        // 获取wiki类型名称
        const resWikiTypeData = await getWikiTypeById(data.itemWIKITypeId);

        // 准备展示数据
        wikiData.value = {
            id: wikiId,
            createUser: data.createUser,
            projectName: data.projectName,
            processingDate: data.processingDate,
            beginDate: tableTimeDateMsg(data.beginDate),
            endDate: tableTimeDateMsg(data.endDate),
            auxiliaryUser: data.auxiliaryUser,
            developmentBBTime: data.developmentBBTime,
            isTrue: data.isTrue,
            isArchiving: data.isArchiving,
            archivingUrl: data.archivingUrl,
            problemReason: data.problemReason,
            trueResult: data.trueResult,
            problemMsg: data.problemMsg,
            problemPhoto: removeEmptyLines(data.problemPhoto),
            itemWIKITypeName: resWikiTypeData.data.data.typeName
        };
        currentRating.value = parseInt(resData.data.data.wikiRate);
    } catch (error) {
        console.error('获取wiki详情失败:', error);
    }
};

onMounted(() => {
    fetchWikiData();
});
</script>

<style scoped lang="scss">
.mobile-wiki-detail {
    padding: 0;
    background-color: #f8f9fa;
    min-height: 100vh;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.detail-header {
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: #409eff;
    color: white;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

    .back-button {
        display: flex;
        align-items: center;
        margin-right: 16px;
        font-size: 20px;
        cursor: pointer;
    }

    .detail-title {
        font-size: 18px;
        font-weight: 500;
        margin: 0;
        flex: 1;
        text-align: center;
        transform: translateX(-16px);
    }
}

.detail-content {
    padding: 16px;
}

.info-card {
    background-color: white;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);

    &.proof-card {
        padding-bottom: 8px;
    }

    &.rating-card {
        .info-label {
            margin-bottom: 8px;
        }
    }
}

.info-item {
    display: flex;
    margin-bottom: 12px;
    line-height: 1.5;

    &.full-width {
        flex-direction: column;
    }

    &:last-child {
        margin-bottom: 0;
    }
}

.info-label {
    font-weight: 500;
    color: #606266;
    min-width: 80px;
    margin-right: 8px;
    font-size: 14px;
}

.info-value {
    flex: 1;
    color: #303133;
    word-break: break-word;
    font-size: 14px;

    &.solved {
        color: #67c23a;
        font-weight: 500;
    }

    &.unsolved {
        color: #f56c6c;
        font-weight: 500;
    }

    &.archived {
        color: #67c23a;
        font-weight: 500;
    }

    &.unarchived {
        color: #f56c6c;
        font-weight: 500;
    }
}

.info-link {
    color: #409eff;
    text-decoration: none;
    word-break: break-all;

    &:hover {
        text-decoration: underline;
    }
}

.proof-content {
    margin-top: 8px;
    padding: 12px;
    background-color: #f5f7fa;
    border-radius: 8px;

    img {
        max-width: 100%;
        height: auto;
        margin: 8px 0;
        border-radius: 4px;
        cursor: pointer;
        transition: transform 0.2s;

        &:active {
            transform: scale(0.98);
        }
    }

    p {
        margin: 8px 0;
        line-height: 1.6;
    }
}

/* 评分星星样式 */
.rating-stars {
    display: flex;
    margin-top: 8px;
    gap: 8px;

    .star {
        cursor: pointer;
        color: #c0c4cc;
        transition: color 0.2s;

        &.active {
            color: #f7ba2a;
        }

        &.rated {
            cursor: default;
        }
    }
}

.rating-feedback {
    margin-top: 8px;
    font-size: 14px;
    color: #67c23a;
    font-weight: 500;
    animation: fadeIn 0.5s;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* 图片查看器样式 */
.image-viewer {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.9);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    touch-action: none;

    .image-container {
        position: relative;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;

        img {
            max-width: 100%;
            max-height: 80%;
            transition: transform 0.3s ease;
            transform-origin: center center;
        }
    }

    .image-toolbar {
        position: absolute;
        bottom: 20px;
        left: 0;
        right: 0;
        display: flex;
        justify-content: center;
        gap: 20px;

        .tool-button {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            background-color: rgba(255, 255, 255, 0.2);
            border: none;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            cursor: pointer;
            transition: background-color 0.2s;

            &:active {
                background-color: rgba(255, 255, 255, 0.4);
            }

            .el-icon {
                font-size: 20px;
            }
        }
    }
}

/* 动画效果 */
.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.3s;
}

.fade-enter,
.fade-leave-to {
    opacity: 0;
}
</style>